<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-99" :style="{'paddingTop':$store.state.statusBarHeight+'px','top':'0'}">
			<view class="title">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30"></text></view>
				<text>{{title}}</text>
			</view>
		</view>
		<view class="bg-3fcecb pb-5" style="width: 720rpx; margin: 200rpx auto 0; overflow: hidden;">
			<view class="ml-5 mt-3 d-flex d-flex-middle">
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png" style="width: 50rpx; height: 50rpx;"></image>
				<text class="ml-1 colorfff font34 font-bold">小嗒组队</text>
			</view>
			<view class="ml-3 colorfff font50 font-bold mt-7">小嗒组队APP介绍</view>
			<view class="ml-3 colorfff font34 font-bold mt-1">Introduction to Xiaoda Teaming App</view>
			<view class="bg-fff rounded20 p-3" style="width: 660rpx; margin: 50rpx auto 0; box-sizing: border-box;">
				<view class="rounded15" style="background: #f3fbfb;">
					<view class="m-1 pt-3" style="color: #2bc9c6;">小嗒组队，一个找游戏搭子的APP，致力于搭建快乐、有趣、开放、友善、互助、温暖的平台。</view>
					<view class="m-1 py-3" style="color: #2bc9c6;">我们于2025年5月上线，很多基础功能还在搭建中，我们将尽快完善功能，给大家更好的服务和体验。</view>
				</view>
				<view class="position-relative mt-3" style="height: 60rpx;">
					<view class="position-absolute z-index-10 color000 font34 font-bold" style="left: 10rpx;">小嗒组队APP介绍</view>
					<view class="position-absolute" style="width: 290rpx; height: 20rpx; background: #3fcecb; bottom: 15rpx;"></view>
				</view>
				<view class="mt-2" style="color: #262626;">告别单排自闭，通过精准匹配找到「懂你战术」的队友，让配合从偶然变成必然;</view>
				<view style="color: #262626;">用游戏兴趣打破人际坚冰，从「搭子」变「战友甚至发展成现实好友;</view>
				<view style="color: #262626;">赛事荣誉、组队成就、趣味标签，让每一局游戏都成为可展示的社交资产;</view>
				<view style="color: #262626;">在虚拟社区中找到同频群体，无论是深夜车队还是整活赛事，总有人陪你疯玩到底。</view>
				<view class="bg-f5 rounded15 p-2" style="width: 600rpx; margin: 30rpx auto 0; box-sizing: border-box;">
					<view class="p-1" style="background: #dcf4f4; display: inline-block;">找游戏搭子</view>
					<view class="mt-1">
						一起组队开黑、上排位、CPDD。有《王者荣耀》《和平精英》《蛋仔派对》《光·遇》《逆水寒》《金铲铲》等热门手游搭子、有《英雄联盟》《CS:GO》《无畏契约》《双人成行》《猛兽派对》等Steam、Wegame端游搭子以及Switch、Xbox、索尼PS主机游戏玩家;输赢不是终点，和谁玩、怎么玩才是游戏真正的乐趣。
					</view>
				</view>
			</view>
			<view class="bg-fff rounded20 p-3" style="width: 660rpx; margin: 30rpx auto 0; box-sizing: border-box;">
				<view class="position-relative mt-3" style="height: 60rpx;">
					<view class="position-absolute z-index-10 color000 font40 font-bold" style="left: 10rpx;">功能介绍</view>
					<view class="position-absolute" style="width: 180rpx; height: 20rpx; background: #b2ebea; bottom: 15rpx;"></view>
				</view>
				<view class="mt-5">
					<view class="d-flex mt-1">
						<view class="rounded50 d-flex-btn mr-2" style="width: 140rpx; height: 100rpx; background: #e8fbff;">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%8A%A0%E5%A5%BD%E5%8F%8B2.png" style="width: 45rpx; height: 45rpx;"></image>
						</view>
						<view class="d-flex d-flex-column d-flex-center">
							<view class="color000 font32 font-bold mb-2">嗒子卡</view>
							<view style="color: #6c6b6b;">自定义你的组队需求，独创个性标签系统，动态展示游戏名片</view>
						</view>
					</view>
					<view class="d-flex mt-4">
						<view class="rounded50 d-flex-btn mr-2" style="width: 140rpx; height: 100rpx; background: #e8fbff;">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BE%8E%E9%A2%9C.png" style="width: 45rpx; height: 45rpx;"></image>
						</view>
						<view class="d-flex d-flex-column d-flex-center">
							<view class="color000 font32 font-bold mb-2">随机匹配</view>
							<view style="color: #6c6b6b;">精准算法推荐:根据游戏习惯+性格测试+语音沟通偏好多维匹配</view>
						</view>
					</view>
					<view class="d-flex mt-4">
						<view class="rounded50 d-flex-btn mr-2" style="width: 100rpx; height: 100rpx; background: #e8fbff;">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%8A%A8%E6%80%81-%E5%8F%91%E5%B8%83.png" style="width: 45rpx; height: 45rpx;"></image>
						</view>
						<view class="d-flex d-flex-column d-flex-center">
							<view class="color000 font32 font-bold mb-2">动态发布</view>
							<view style="color: #6c6b6b;">记录生活·心情·故事，一个有温度的社区空间</view>
						</view>
					</view>
					<view class="d-flex mt-4">
						<view class="rounded50 d-flex-btn mr-2" style="width: 115rpx; height: 100rpx; background: #e8fbff;">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%97%BA%E6%97%BA.png" style="width: 45rpx; height: 45rpx;"></image>
						</view>
						<view class="d-flex d-flex-column d-flex-center">
							<view class="color000 font32 font-bold mb-2">聊天交流</view>
							<view style="color: #6c6b6b;">遇见同龄人、同好，交流共吗，开心有 趣，减轻社恐</view>
						</view>
					</view>
					<view class="d-flex mt-4">
						<view class="rounded50 d-flex-btn mr-2" style="width: 115rpx; height: 100rpx; background: #e8fbff;">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/171.png" style="width: 45rpx; height: 45rpx;"></image>
						</view>
						<view class="d-flex d-flex-column d-flex-center">
							<view class="color000 font32 font-bold mb-2">赛事报名</view>
							<view style="color: #6c6b6b;">每周主题水友赛，段位晋升训练营，创意赛事工坊;</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-fff rounded20 p-3" style="width: 660rpx; margin: 30rpx auto 0; box-sizing: border-box;">
				<view class="color4a mt-2" style="line-height: 45rpx;">我们致力于打造安全绿色、有趣有爱、回归心灵的社区氛围，抵制不良低俗社交。</view>
				<view class="color4a mt-2" style="line-height: 45rpx;">小嗒组队App还在快速迭代优化中，请大家多支持如果觉得小嗒组队还不错，希望分享给身边朋友、同学、游戏群。</view>
				<view class="color000 font32 font-bold mt-5">关注我们</view>
				<view class="d-flex d-flex-middle mt-3">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E4%BA%92%E8%81%94%E7%BD%91.png" style="width: 30rpx; height: 30rpx;"></image>
					<text class="ml-1 mb mr" style="color: #444444;">官方网站:</text>
					<text class="mb" style="color: #396dd8;">gamepartner.cn</text>
				</view>
				<view class="d-flex d-flex-middle mt-1">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E9%82%AE%E4%BB%B6.png" style="width: 30rpx; height: 30rpx;"></image>
					<text class="ml-1 mb mr" style="color: #444444;">官方邮箱:</text>
					<text class="mb" style="color: #396dd8;">17671638871@163.com</text>
				</view>
				<view class="color000 font32 font-bold mt-5">玩家反馈</view>
				<view class="mt-3 mb-1 d-flex d-flex-middle d-flex-wrap">
					<view class="rounded colorfff d-flex-btn text-center" style="background: #444; display: inline-block; width: 35rpx; height: 40rpx;">1</view>
					<text class="font32 ml-1 mr" style="color: #444444;">联系小嗒组队客服:</text>
					<text class="font32" style="color: #396dd8;">我的-更多-我的客服</text>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/concat.png" mode="widthFix" style="width: 600rpx;"></image>
				<view class="mt-3 mb-1 d-flex d-flex-middle d-flex-wrap">
					<view class="rounded colorfff d-flex-btn text-center" style="background: #444; display: inline-block; width: 35rpx; height: 40rpx;">2</view>
					<text class="font32 ml-1 mr" style="color: #444444;">直接在APP内:</text>
					<text class="font32" style="color: #396dd8;">我的-更多(同上)-关于我们-意见反馈</text>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/concat2.png" mode="widthFix" style="width: 600rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '小嗒APP的简介'
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.main {
		background: #fff;
		overflow: hidden;
		.content {
			width: 100%;
			background-color: #fff !important;
		}
		.content .title {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding-right: 47rpx;
		}
		.content .title text {
			flex: 1;
			font-size: 32rpx;
			text-align: center;
			font-weight: normal;
		}
		.z-index-99 {
			z-index: 99;
		}
	}
	.bg-3fcecb {
		background: linear-gradient(to bottom, #3fcecb 0%, #3fcecb 15%, #a0e7e9 25%, #cef3f6 30%, #e7fafe 100%);
	}
</style>
